<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('时分秒选择')}`">{{ $t('时分秒选择') }}</t>
            <li>
                <span class="s-code">defaultValue</span>可以设置时间面板打开时默认展示的时间
            </li>
            <li>
                <span class="s-code">disabledHours</span>、
                <span class="s-code">disabledMinutes</span>、
                <span class="s-code">disabledSeconds</span>分别可以设置时、分、秒的禁用状态
            </li>
            <li>
                <span class="s-code">format</span>可以设置输入框内展示值的格式化规则
            </li>
            <li>
                <span class="s-code">valueFormat</span>可以设置<span class="s-code">v-model</span>绑定值的格式化规则
            </li>
        </template>
        <div style="color:#999;">
            <div style="width: 300px;">
                <p style="color:#666;">普通用法：</p>
                <sib-item v-model="value1" :props="props1" @change="change"></sib-item>
                <p>当前选择的是：{{ value1 }}</p>
            </div>
            <div style="width: 300px;">
                <p style="color:#666;">设置禁用：</p>
                <sib-item v-model="value2" :props="props2" @change="change"></sib-item>
                <p>当前选择的是：{{ value2 }}</p>
            </div>
            <div style="width: 300px;">
                <p style="color:#666;">格式化绑定值和展示值：</p>
                <sib-item v-model="value3" :props="props3" @change="change"></sib-item>
                <p>当前选择的是：{{ value3 }}</p>
            </div>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const makeRange = (start, end) => Array(end - start + 1).fill().map((_, i) => i + start);

        const value1 = ref(null);
        const value2 = ref('19:06:58');
        const value3 = ref(+new Date());
        const props1 = reactive({
            type: 'time',
            defaultValue: '15:30:20',
        });
        const props2 = reactive({
            type: 'time',
            // 只允许选择 17、18 点
            disabledHours: () => makeRange(0, 16).concat(makeRange(19, 23)),
            disabledMinutes: (hour) => {
                // 当选择 17 点时，禁用 0-29 分的选项
                if (hour === 17) return makeRange(0, 29);
                // 当选择 18 点时，禁用 31-59 分的选项
                if (hour === 18) return makeRange(31, 59);
                // 不禁用
                return null;
            },
            disabledSeconds: (hour, minute) => {
                // 当选择 18 点且选中 30 分时，禁用 01-59 分的选项
                if (hour === 18 && minute === 30) return makeRange(1, 59);
                return null;
            },
        });
        const props3 = reactive({
            type: 'time',
            format: '北京时间：HH点mm分ss秒',
            valueFormat: 'x',
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return {
            value1,
            props1,
            value2,
            props2,
            value3,
            props3,
            change,
            templateString: `<template>
    <div>
        <p>普通用法：</p>
        <sib-item v-model="value1" :props="props1" @change="change"></sib-item>
        <p>当前选择的是：{{ value1 }}</p>
    </div>
    <div>
        <p>设置禁用：</p>
        <sib-item v-model="value2" :props="props2" @change="change"></sib-item>
        <p>当前选择的是：{{ value2 }}</p>
    </div>
    <div>
        <p>格式化绑定值和展示值：</p>
        <sib-item v-model="value3" :props="props3" @change="change"></sib-item>
        <p>当前选择的是：{{ value3 }}</p>
    </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const makeRange = (start, end) => Array(end - start + 1).fill().map((_, i) => i + start);

        const value1 = ref(null);
        const props1 = reactive({
            type: 'time',
            defaultValue: '15:30:20',
        });

        const value2 = ref('19:06:58');
        const props2 = reactive({
            type: 'time',
            // 只允许选择 17、18 点
            disabledHours: () => makeRange(0, 16).concat(makeRange(19, 23)),
            disabledMinutes: (hour) => {
                // 当选择 17 点时，禁用 0-29 分的选项
                if (hour === 17) return makeRange(0, 29);
                // 当选择 18 点时，禁用 31-59 分的选项
                if (hour === 18) return makeRange(31, 59);
                // 不禁用
                return null;
            },
            disabledSeconds: (hour, minute) => {
                // 当选择 18 点且选中 30 分时，禁用 01-59 分的选项
                if (hour === 18 && minute === 30) return makeRange(1, 59);
                return null;
            },
        });

        const value3 = ref(+new Date());
        const props3 = reactive({
            type: 'time',
            format: '北京时间：HH点mm分ss秒',
            valueFormat: 'x',
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return { value1, value2, value3, props1, props2, props3, change };
    },
};
<\/script>`,
        };
    },
};
</script>
